<template>
    <div id="app" v-loading="loading">
        <div class="title">接单列表</div>
        <el-row class="tableBtnTop">
            <el-select 
                v-model="searchType"
                placeholder="请选择" class="filter"
            >
                <el-option
                    v-for="(typeItem,typeIndex) of searchTypeList"
                    :key="typeItem.value"
                    :value="typeItem.value"
                    :label="typeItem.name"
                ></el-option>
            </el-select>
            <div class="search">
                <el-input placeholder="请输入内容"
                    v-model="searchText"
                    @keyup.enter.native="handleSearch"
                >
                    <i slot="prefix" class="el-input__icon el-icon-search"
                    ></i>
                </el-input>
            </div>
        </el-row>
        <el-table :data="tableData" border
            @filter-change="handleFilter"
            ref="filterTable"
        >
            <el-table-column prop="user" label="用户" :show-overflow-tooltip="true" min-width="109">
                <template slot-scope="scope">
                    <div class="userHead" @click="$router.push(`/user/detail/${scope.row.user_id}`)">
                        <img :src="scope.row.avatar" class="square" />
                        {{
                            scope.row.nick_name
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="task_title" label="任务标题" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{
                        scope.row.title
                    }}
                </template>
            </el-table-column>
            <el-table-column prop="class" label="分类" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{
                        scope.row.first_name + scope.row.seconde_name
                    }}
                </template>
            </el-table-column>
            <el-table-column prop="time" label="接单时间" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{
                        countTrialDate(scope.row.time_created * 1000)
                    }}
                </template>
            </el-table-column>
            <el-table-column prop="price" label="赏金 / 实际获得" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <font color="#F30">
                        {{priceFormat(scope.row.amount)}} / {{priceFormat(scope.row.amount_actual)}}
                    </font>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" :show-overflow-tooltip="true"
                column-key="status"
                :filters="status"
            >   
                <template slot-scope="scope">
                    <font color="#acacac" v-if="scope.row.status==1">进行中</font>
                    <font color="#acacac" v-else-if="scope.row.status==2">待审核</font>
                    <font color="#52c41a" v-else-if="scope.row.status==3">已完成</font>
                    <font color="#1890ff" v-else-if="scope.row.status==4">仲裁中</font>
                    <font color="#ff3102" v-else-if="scope.row.status==5">未通过</font>
                    <font color="#acacac" v-else-if="scope.row.status==6">已关闭</font>
                </template>
            </el-table-column>
            <el-table-column prop="btn" label="操作" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <router-link class="blue" :to="'/task/acceptDetail?acceptId='+ scope.row.id + '&listPage=' + curPage">
                        查看
                    </router-link>
                </template>
            </el-table-column>
        </el-table>
        <div class="paginationBlock">
            <el-pagination 
                layout="jumper,prev, pager, next,total" 
                :total="listNumsTotal" :page-size="10"
                :current-page.sync="curPage"
                @current-change="changePage"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import AcceptList from './index.js';
    export default AcceptList;
</script>
<style lang="scss" scoped>
    .title{
        margin-bottom:25px;
        font-size:21px;
        margin-top:65px;
    }
</style>